(function () {
    // 表单的处理
    let inputs = document.querySelectorAll('input[type="text"]');
    let inputArray = [];
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].setAttribute('data-index', i.toString());
        let placeholder = inputs[i].placeholder;
        inputArray.push(placeholder);
        inputs[i].addEventListener('focus', function (e) {
            this.placeholder = '';
        })
        inputs[i].addEventListener('blur', function (e) {
            this.placeholder = inputArray[this.getAttribute('data-index')];
        })
    }

    function animate(obj, target, callback) {
        //防止多个累加器叠加
        clearInterval(obj.timer);
        //传进来的是一个对象,把这个对象加一个属性 ,这个属性就是其定时器ID

        obj.timer = setInterval(function (e) {
            let step = (target - obj.offsetLeft) / 10;
            if (step >= 0) {
                // 大于0 向上取整
                step = Math.ceil(step);
            } else {
                //小于0 向下取整
                step = Math.floor(step);
            }
            //设置停止条件
            if (obj.offsetLeft === target) {
                //如果有回调函数,调用
                if (callback) {
                    callback();
                }
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 30);
    }

    // 轮播图的处理
    let focus = document.querySelector('.focus');
    let ol = document.querySelector('.circle');
    let arrow_l = document.querySelector('.arrow-l');
    let arrow_r = document.querySelector('.arrow-r');
    let ul = document.querySelector('.focus ul');
    let num = ul.children.length; // 5
    let focusWidth = focus.offsetWidth;
    let index = 0;

    focus.addEventListener('mouseenter', function () {
        clearInterval(timer);
        timer = null;
    })

    focus.addEventListener('mouseout', function () {
        if (timer === null) {
            timer = setInterval(function () {
                arrow_r.click();
            }, 3000);
        }
    })

    for (let i = 0; i < num - 1; i++) {
        let li = document.createElement('li');
        li.setAttribute('index', i.toString());
        li.className = 'circle-no-current';
        if (i === 0) {
            li.className = 'circle-current';
        }
        ol.appendChild(li);

        li.addEventListener('click', function (e) {
            for (let j = 0; j < num - 1; j++) {
                ol.children[j].className = 'circle-no-current';
            }
            this.className = 'circle-current';
            let now_index = this.getAttribute('index');
            index = now_index;
            animate(ul, -focusWidth * index);
        });

    }
    arrow_r.addEventListener('click', function () {
        if (index === num - 1) {
            ul.style.left = 0 + 'px';
            index = 0;
        }
        index++;
        animate(ul, -focusWidth * index);

        // 设置小圆点
        for (let j = 0; j < num - 1; j++) {
            ol.children[j].className = 'circle-no-current';
        }
        if (index === num - 1) {
            ol.children[0].className = 'circle-current';
        } else {
            ol.children[index].className = 'circle-current';
        }
    })
    arrow_l.addEventListener('click', function () {

        if (index === 0) {
            index = num - 1;
            ul.style.left = -index * focusWidth + 'px';
            console.log(ul.style.left)

        }
        index--;

        animate(ul, -focusWidth * index);


        // 设置小圆点
        for (let j = 0; j < num - 1; j++) {
            ol.children[j].className = 'circle-no-current';
        }
        if (index === num - 1) {
            ol.children[0].className = 'circle-current';
        } else {
            ol.children[index].className = 'circle-current';
        }

    })

    let timer = setInterval(function () {
        arrow_r.click();
    }, 3000);


    // 鼠标悬浮显示
    let the_lis = document.querySelectorAll('.main .main-left .list .list-body dl dd ol li');
    for (let i = 0; i < the_lis.length; i++) {
        the_lis[i].addEventListener('mouseenter', function (e) {
                let div = this.querySelector('div');
                div.style.display = 'block';
            }
        )
        the_lis[i].addEventListener('mouseleave', function (e) {
                let div = this.querySelector('div');
                div.style.display = 'none';
            }
        )
    }

    // 返回顶部模块
    let to_top = document.querySelector('.to_top');
    document.addEventListener('scroll', function () {
        if (document.documentElement.scrollTop >= 200) {
            to_top.style.display = 'block';
        } else {
            to_top.style.display = 'none';
        }
    })

    let timer2 = null;
    to_top.addEventListener('click', function (e) {
        if (timer2 !== null){
            cancelAnimationFrame(timer2);
        }

        timer2 = requestAnimationFrame(function fn() {
            let oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    })
})()
